<template>
  <div class="wap-container manQualityServiceItem">
    <section class="top bgfff">
      <div class="order-info" v-if="orderInfo">
        <ul class="pl10 pb15">
          <li class="rowflex">
            <div class="info-item c666 ">工单编号</div>
            <div>{{orderInfo.code}}</div>
          </li>
          <li class="rowflex">
            <div class="info-item c666">工程师</div>
            <div>{{orderInfo.engineer.nickName}}</div>
          </li>
          <li class="rowflex">
            <div class="info-item c666">工作代码</div>
            <div>{{orderInfo.workOrderType.name}}</div>
          </li>
          <li class="rowflex hide" v-if="false">
            <div class="info-item c666">流程模板</div>
            <div>{{orderInfo}}</div>
          </li>
          <li class="rowflex" v-if="orderInfo.county">
            <div class="info-item c666 ">区县</div>
            <div>{{orderInfo.county}}</div>
          </li>
          <li class="rowflex" v-if="orderInfo.customer">
            <div class="info-item c666 ">服务对象</div>
            <div>{{orderInfo.customer.customerName}}</div>
          </li>
          <li class="rowflex" v-if="orderInfo.preFinishedTime">
            <div class="info-item c666 ">截止时间</div>
            <div>{{_dateFormat(orderInfo.preFinishedTime, 'YYYY-MM-DD hh:mm:ss')}}</div>
          </li>
        </ul>
      </div>
    </section>

    <section class="bottom">
      <div class="bottom-title">
        <div>当前节点
          <span class="blue ml10">({{index}})&nbsp{{serviceInfo.serviceType}}</span>
        </div>
      </div>

      <div class="gcs-box" v-if="picList.length > 0">
        <div class="red mb10" v-if="false">质检时间1分钟</div>
        <!--<div>现场反馈图<span  class="ml20">工程师处理时长</span><span class="ml5">时间</span></div>-->
        <div>现场反馈图<span class="ml20">工程师处理时长</span><span class="ml5">{{enTime}}</span></div>
        <div class="gcs-img-box">
          <img class="previewer-img" v-for="(item,index) in picList" @click="show(index)" :src="_getPath(item)">
        </div>
        <!--<div class="gcs-img-box">-->
        <!--<div @click="show(index)" v-for="(item,index) in picList" class="picItem previewer-img" v-bind:style="{backgroundImage: 'url(_getPath(item))', backgroundSize: 'cover' }"></div>-->
        <!--</div>-->
      </div>
      <div class="standard-box">
        <div>参考审核标准<span class="ml20">标准工作时长</span><span class="ml5">{{serviceInfo.predictTime}}</span></div>
        <div class="standard-img-box" v-if="serviceInfo.standardFileStore">
          <img class="previewer-img-Standard" v-for="(item,index) in standardFileStorePath" :key="index"
               @click="showStandard(index)"
               :src="_getPath(item)">
        </div>
      </div>
      <div class="desc rowflex">
        <div class="c666 mr15">工作描述</div>
        <div class="desc-text"> {{serviceInfo.endingState}}</div>
      </div>
    </section>


    <section class="bottom_bar cfff rowflex">
      <div @click="quality(1)" class="bottom_bar_left">通过</div>
      <div @click="quality(0)" class="bottom_bar_right">退回</div>
    </section>
    <div v-transfer-dom>
      <previewer :list="bigImgPath" ref="previewer" :options="options"></previewer>
    </div>
    <div v-transfer-dom>
      <previewer :list="bigImgPathStandard" ref="previewerStandard" :options="optionsStandard"></previewer>
    </div>
  </div>
</template>

<script>
  import {Group, XInput, XButton, Divider, Loading, Previewer, TransferDom} from "vux";

  export default {
    name: "ManDistributeOrder",
    components: {
      Group,
      XInput,
      XButton,
      Divider,
      Loading,
      Previewer
    },
    directives: {
      TransferDom
    },
    data() {
      return {
        serviceInfo: {},
        workOrderType: {},
        orderInfo: null,
        picPathList: [],
        serviceId: '',
        orderId: '',
        index: null,
        enTime: null,
        picList: [],
        bigImgPath: [],
        bigImgPathStandard: [],
        //图片预览
        options: {
          getThumbBoundsFn(index) {
            let thumbnail = document.querySelectorAll('.manQualityServiceItem .previewer-img')[index]
            let pageYScroll = window.pageYOffset || document.documentElement.scrollTop
            let rect = thumbnail.getBoundingClientRect()
            return {x: rect.left, y: rect.top + pageYScroll, w: rect.width}
          },
        },
        optionsStandard: {
          getThumbBoundsFn(index) {
            let thumbnail = document.querySelectorAll('.manQualityServiceItem .previewer-img-Standard')[index]
            let pageYScroll = window.pageYOffset || document.documentElement.scrollTop
            let rect = thumbnail.getBoundingClientRect()
            return {x: rect.left, y: rect.top + pageYScroll, w: rect.width}
          }
        },
        standardFileStorePath: [],
      }
    },
    methods: {
      quality: function (param) {
        let data
        if (param === 1) {
          data = true
        } else {
          data = false
        }

        this.$http.put('/work/api/serviceitem/' + this.serviceId + '/quality', data, {headers: {"Content-Type": "application/json"}}).then(res => {
            this.$router.push({path: '/management/manOrderHome'})
          }
        )
      }
      ,
      formatSeconds(value) {
        var secondTime = parseInt(value);// 秒
        var minuteTime = 0;// 分
        var hourTime = 0;// 小时
        if (secondTime > 60) {//如果秒数大于60，将秒数转换成整数
          //获取分钟，除以60取整数，得到整数分钟
          minuteTime = parseInt(secondTime / 60);
          //获取秒数，秒数取佘，得到整数秒数
          secondTime = parseInt(secondTime % 60);
          //如果分钟大于60，将分钟转换成小时
          if (minuteTime > 60) {
            //获取小时，获取分钟除以60，得到整数小时
            hourTime = parseInt(minuteTime / 60);
            //获取小时后取佘的分，获取分钟除以60取佘的分
            minuteTime = parseInt(minuteTime % 60);
          }
        }
        var result = "" + parseInt(secondTime) + "秒";

        if (minuteTime > 0) {
          result = "" + parseInt(minuteTime) + "分" + result;
        }
        if (hourTime > 0) {
          result = "" + parseInt(hourTime) + "小时" + result;
        }
        return result
      }
      ,
      //图片预览
      show(index) {
        this.$refs.previewer.show(index)
      }
      ,
      showStandard(index) {
        this.$refs.previewerStandard.show(index)
      }
      ,
      showBig() {
        this.showBigPicture = !this.showBigPicture;
      }
      ,
    }
    ,
    mounted() {
      let id = this.$route.query.orderId
      console.log(this.$route.query.orderId)
      this.orderId = id

      let data = {workOrderId: this.orderId, noPage: true, orderNumber: 'asc'}
      this.$http.get('/work/api/serviceitem/', {params: data}).then(res => {
          for (var i = 0; i < res.data.data.length; i++) {
            if (res.data.data[i].status === 4) {//筛选未质检的服务项目
              this.serviceInfo = res.data.data[i]
              if (this.serviceInfo.qualityFileStore) {
                let key = this.serviceInfo.qualityFileStore
                this.$http.get('/work/api/upload/byid?ids=' + key).then(res => {
                  let result = res.data.data[key]
                  for (var i = 0; i < result.length; i++) {
                    this.picList.push(result[i].path)
                  }
                  this.bigImgPath = res.data.data[key].map(item => {
                    return {msrc: this._getPathNo(item.path), src: this._getPathNo(item.path)}
                  })
                })
              }
              if (this.serviceInfo.standardFileStore) {
                let key = this.serviceInfo.standardFileStore
                this.$http.get('/work/api/upload/byid?ids=' + key).then(res => {
                  let result = res.data.data[key]
                  for (var i = 0; i < result.length; i++) {
                    this.standardFileStorePath.push(result[i].path)
                  }
                  this.bigImgPathStandard = res.data.data[key].map(item => {
                    return {msrc: this._getPathNo(item.path), src: this._getPathNo(item.path)}
                  })
                })
              }
              // standardFileStorePath
              this.orderInfo = this.serviceInfo.workOrder
              this.workOrderType = this.orderInfo.workOrderType
              this.serviceId = res.data.data[i].id
              this.index = i + 1

              let oDate1 = new Date(this.serviceInfo.beginTime);
              let oDate2 = new Date(this.serviceInfo.endTime);
              let nTime = oDate2.getTime() - oDate1.getTime();
              this.enTime = this.formatSeconds(nTime / 1000)
            }
          }
        }
      )
    }
  }
</script>

<style lang="less">
  .manQualityServiceItem {
    padding-bottom: 1rem;
    .top, .bottom {
      box-shadow: 0 0.02rem 0.04rem 0 #ebebeb;
      background-color: #fff;
    }
    .bottom-title {
      padding-top: 0.08rem;
      padding: 0.08rem 0.13rem 0 0.13rem;
      height: 0.43rem;
      line-height: 0.35rem;
      font-size: 0.15rem;
      text-align: center;
      display: flex;
      justify-content: space-between;
    }
    .order-info {
      font-size: 0.13rem;
      border-bottom: solid 1px #ebebeb;
      margin-top: 0;
    }
    .order-info ul {
      border-bottom: solid 1px #eee;
      padding-top: 0.01rem;
    }
    .order-info ul li {
      margin-top: 0.1rem;
      line-height: 0.15rem;
    }
    .errorDescription {
      width: 2.75rem;
      line-height: normal;
      margin-top: -0.03rem;
    }
    .order-info .info-item {
      width: 0.75rem;
    }
    .desc {
      padding: 0 0.1rem 0.2rem 0.1rem;
      font-size: 0.13rem;
      .desc-text {
        width: 2.75rem
      }
    }
  }

  .bottom {
    margin-top: 0.2rem;
    .gcs-box, .standard-box {
      font-size: 0.13rem;
      padding: 0.1rem 0.1rem 0.2rem 0.1rem;
      border-top: solid 1px #ebebeb;
      .picItem {
        margin-top: 0.05rem;
        margin-right: 0.1rem;
        width: 1rem;
        height: 1rem;
        display: inline-block;
      }
      img {
        margin-top: 0.05rem;
        margin-right: 0.1rem;
        width: 1rem;
        height: 1rem;
      }
    }
  }

  .bottom_bar {
    width: 100%;
    background: #42a3fd;
    line-height: 0.43rem;
    font-size: 0.15rem;
    text-align: center;
  }

  .bottom_bar_left {
    width: 50%;
    background-color: #42a3fd;
  }

  .bottom_bar_right {
    width: 50%;
    background-color: #df5262;
  }
</style>
